<template>
  <g>
    <svg xmlns="http://www.w3.org/2000/svg" p-id="10406">
      <rect x="0" y="0" rx="5" ry="6" width="50" height="20" :style="'fill: ' + bgFill + ';'" />
      <rect x="0" y="20" rx="5" ry="6" width="50" height="20" :style="'fill: ' + bgFill + ';'" />
      <circle cx="12" cy="30" r="10" :fill="setState(+props.state, 0)" />
    </svg>
    <text x="2" y="15" :font-size="props.fontSize" :fill="props.fill">
      {{ props.text }}
    </text>
    <text x="30" y="35" font-size="14" :fill="props.fill">
      {{ setState(+props.state, 1) }}
    </text>
  </g>
</template>
<script setup lang="ts">
  import { computed, onMounted } from 'vue';

  const props = defineProps({
    fontSize: {
      type: Number,
      default: 10
    },
    text: {
      type: String,
      default: ''
    },
    state: {
      type: String,
      default: ''
    },
    fill: {
      type: String,
      default: ''
    },
    bgFill: {
      type: String,
      default: ''
    }
  });
  const setState = computed(() => (state: number, type: number) => {
    if (type) {
      if (state === 1) {
        return '开';
      }
      if (state === 0) {
        return '关';
      } else {
        return '--';
      }
    } else {
      if (state === 1) {
        return '#66c03b';
      }
      if (state === 0) {
        return '#e4a13d';
      } else {
        return 'rgb(72,72,72)';
      }
    }
  });

  onMounted(() => {
    setState;
  });
</script>
